<template>
  <div class="search">
    <el-autocomplete
      clearable
      placeholder="请输入医院名称"
      class="form"
      v-model="hosname"
      :fetch-suggestions="fetchData"
      :trigger-on-focus="false"
      style="width: 600px;"
      @select="goDetail"
    />
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>
<script setup lang="ts" name="Search">
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {ref} from 'vue';
// 引入请求方法
import {reqHospitalInfo} from '@/api/home/index'
import type {HospitalInfo} from '@/api/home/type'
// 收集搜索的关键字
let hosname=ref<string>('');
// 创建路由对象
let $router=useRouter()
// 顶部组件的回调,keyword收集的文字，cb回到函数
const fetchData=async (keyword:string,cb:any)=>{
  let res:HospitalInfo= await reqHospitalInfo(keyword);
  let reseachData=res.data.map((item:any)=>{
    return {
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  cb(reseachData)
}
// 点击选项触发事件
const goDetail=(item:any)=>{
  // 点击进入医院详情
  $router.push({path:"/hospital/register",query:{hoscode:item.hoscode}})
}
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px 0;
  :deep(.el-input__wrapper){
    margin-right:10px;
  }
}
</style>
